<template>
  <div>
    <!-- 展示选择--开始-->
    <el-row type="flex" justify="center" align="middle" class="licc-goods-info-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:100%;">
        <el-col class="licc-goods-info-center-img">
          <el-row>
            <!-- 展示图--开始 -->
            <el-col style="width: 280px; height: 370px">
              <el-image style="width: 280px; height: 370px; border: 1px solid #ccc;" fit="cover" :src="imgIndexInfo"></el-image>
            </el-col>
            <el-col style="width: 14px; height: 370px"></el-col>
            <el-col style="width: 86px; height: 370px;">
              <el-col style="width: 86px; height: 370px; overflow:hidden;" class="licc-goods-info-imgs">
                <div style="width: 102px; height: 370px; overflow-y:auto;overflow-x: hidden;">
                  <el-image style="width:83px; height:109px;display: inline; float: left;"
                       v-for="(imgInfo, index) in imgUidList"
                       :key="index"
                       @click.native="imgClick(index,imgInfo,imgUidList)"
                       :src="imgInfo.url" :class="imgIndex==index?'imgChoose':'imgDefault'">
                  </el-image>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
        <!-- 展示图--结束 -->
        <el-col style="width: 10px; height: 370px"></el-col>
        <!-- 信息选择--开始 -->
        <el-col class="licc-goods-info-center-info">
          <el-row>
            <el-col class="licc-goods-info-panel-top">
              <el-col>
                <h1>{{goodsInfo.goodsName}}</h1>
                <p>{{goodsInfo.goodsBrief}}</p>
              </el-col>
              <el-col style="background-color: #e9e9e9;">
                <el-col><span class="licc-goods-info-panel-main-span">售价</span><span class="panel-goods-info-maney">￥<i>{{goodsPrice}}</i></span></el-col>
                <el-col><span class="licc-goods-info-panel-main-span">库存</span><span class="panel-goods-info-number"><i>{{goodsNumber}}</i></span></el-col>
              </el-col>
              <el-col style="width: 100%; height: 20px"></el-col>
            </el-col>
            <el-col class="licc-goods-info-panel-main">
              <el-col
                v-for="(goodsAttr, index) in goodsAttrs"
                :key="index">
                <span class="licc-goods-info-panel-main-span">{{goodsAttr.name}}</span>
                <el-tag
                  v-for="(attr, indexAttr) in goodsAttr.data"
                  :key="attr.attrSort"
                  @click="tagChoose(index,indexAttr,attr,goodsAttr)"
                  :type="attr.showImgFlag==0?'info':'danger'">{{attr.attrValue}}</el-tag>
                <!--:type="goodsAttr.initAttrTag?((indexAttr==0)?'danger':(attr.showImgFlag==0?'info':'danger')):(attr.showImgFlag==0?'info':'danger')">{{attr.attrValue}}</el-tag>-->
              </el-col>
            </el-col>
          </el-row>
        </el-col>
        <!-- 信息选择--开始 -->
      </el-row>
    </el-row>
    <!-- 展示选择--结束-->
    <!-- 商品详情--开始 -->
    <el-divider>详情展示</el-divider>
    <el-row type="flex" justify="center" align="middle" class="licc-goods-info-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:100%;">
        <el-col class="licc-goods-info-details">
          <el-image style="width:700px"
               v-for="(imgInfo, index) in imgUidThumb"
               :key="index"
               :src="imgInfo.url">
          </el-image>
        </el-col>
      </el-row>
    </el-row>
    <!-- 商品详情结束开始 -->
  </div>
</template>

<script>
  import pagesrApi from '@/api/backstage/pages'
  export default {
    name: 'GoodsInfo',
    props:['message'],
    data() {
      return {
        /** 轮播展示图默认展示第一张 **/
        imgIndex:0,
        /** 轮播展示图 **/
        imgUidList:[],
        /** 轮播展示大图 **/
        imgIndexInfo: '',
        /** 商品基本信息表 **/
        goodsInfo:{},
        /** 商品初始价格 **/
        initGoodsPrice:0,
        /** 商品价格 **/
        goodsPrice:0,
        /** 商品初始库存 **/
        initGoodsNumber:0,
        /** 商品库存 **/
        goodsNumber:0,
        /** 属性值排列 **/
        goodsAttrs:[],
        /** 属性值组合属性 **/
        products:[],
        /** 选中的属性值组合 **/
        productChoose:{},
        /** 详情图 **/
        imgUidThumb:[],
        /** 详情页和评价选择 **/
        // activeName:'first',
        // /** 购买数量 **/
        // buyNum: 1
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage(){
        console.log(this.message);
        let params = {
          goodsId:this.message.id,
          catId:this.message.catId
        }
        pagesrApi.initShopgoodsList(params).then(res => {
          /** 轮播图 **/
          this.imgUidList = res.data.imgUidList;
          /** 轮播图默认显示图 **/
          this.imgIndexInfo = res.data.imgUidList[0].url;
          /** 商品基本信息 **/
          this.goodsInfo = res.data.shopGoods;
          /** 商品初始价格 **/
          this.initGoodsPrice = res.data.shopGoods.shopPrice;
          /** 商品总库存 **/
          this.initGoodsNumber = res.data.shopGoods.goodsNumber;
          /** 商品属性值 **/
          this.goodsAttrs = res.data.goodsAttrs;
          /** 属性值的组合属性 **/
          this.products = res.data.products;
          /** 商品价格-商品库存 需要放在商品基本信息、属性值和属性值的组合后面 **/
          this.initGoodsPriceAndNumUtils();
          /** 详情图 **/
          this.imgUidThumb = res.data.imgUidThumb;
        }).catch(() => {

        });
      },
      imgClick(index,imgInfo,imgUidList){
        /** 中部轮播图点击事件 **/
        this.imgIndex = index;
        this.imgIndexInfo = imgInfo.url;
        console.log(index);
      },
      tagChoose(index,indexAttr,attr,attrs){
        /** 属性点击事件 **/
        attrs.data.forEach((value, i) => {
          /** 遍历该类属性，并初始化没选 **/
          value.showImgFlag = 0;
        });
        /** 显示该属性被选择 **/
        attr.showImgFlag = 1;
        this.initGoodsPriceAndNumUtils();
      },
      initGoodsPriceAndNumUtils(){
        /** 存储被选中属性的ID **/
        let attrIds = [];
        this.goodsAttrs.forEach(value => {
          /** 遍历所有属性 **/
          value.data.forEach(attrChoose => {
            /** 遍历该类属性 **/
            if (attrChoose.showImgFlag === 1){
              /** 保存选中属性的ID **/
              attrIds.push(attrChoose.id);
            }
          });
        });
        /** 选中属性ID重新排序，便于比较 **/
        attrIds = attrIds.sort();
        this.products.some(value => {
          /** 遍历所有属性的组合 拿到组合属性ID**/
          let attrIdsOfProducts = value.goodsAttr.split(":");
          /** 组合属性ID重排序 便于比较 **/
          attrIdsOfProducts = attrIdsOfProducts.sort();
          if (attrIdsOfProducts.toString() === attrIds.toString()){
            /** 如果组合ID相同，重新计算价格 **/
            this.goodsPrice = this.initGoodsPrice + value.productPrice;
            this.goodsNumber = value.productNumber;
            /** 购买商品数量 **/
            this.buyNum = this.goodsNumber === 0?0:1;
            /** 选中的组合 **/
            this.productChoose = value;
            return true;
          }
        });
      },
    }
  }
</script>
<style>
  .licc-goods-info-top-row{
    width: 100%;
    margin-top: 20px;
  }
  .licc-goods-info-center-img{
    padding: 0px;
    width: 400px;
    height: 370px;
  }
  .licc-goods-info-center-info{
    padding: 0px;
    width: 500px;
    height: 370px;
  }
  .licc-goods-info-imgs{
    margin-bottom: 0px;
  }
  .imgChoose{
    border: 1px solid #e53e41;
  }
  .imgDefault{
    border: 1px solid #ccc;
  }
  /** 详情 **/
  .licc-goods-info-panel-top{
    text-align: left;
    border-bottom: 1px solid #ccc;
  }
  .licc-goods-info-panel-top h1{
    font-size: 20px;
    font-weight: 400;
    color: #333;
    margin-bottom: 14px;
  }
  .licc-goods-info-panel-top p{
    font-size: 14px;
    color: #999;
    margin-bottom: 14px;
  }
  .licc-goods-info-panel-main{
    margin-top: 20px;
    text-align: left;
  }
  .licc-goods-info-panel-main-span{
    padding-left: 20px;
    float: left;
    width: 65px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    font-weight: 400;
  }
  .panel-goods-info-maney{
    color: #f85453;
  }
  .panel-goods-info-maney i{
    display: inline-block;
    vertical-align: -3px;
    height: 35px;
    line-height: 35px;
    font-size: 28px;
  }
  .panel-goods-info-number i{
    height: 35px;
    line-height: 35px;
  }
  .el-tag--info{
    display: inline-block;
    margin: 0 10px 20px 0;
    background-color: rgba(255,255,255,0);
    cursor: pointer;
  }
  .el-tag--danger{
    display: inline-block;
    margin: 0 10px 20px 0;
    background-color: rgba(255,255,255,0);
  }
  /*.licc-panel-bottom{*/

  /*}*/
  .licc-goods-info-details{
    width: 700px;
    margin-top: 0px;
  }
  i{
    font-style: normal;
  }
</style>
